<template>
    <div class="pad">
        <el-row>
            <el-col :span="7">
                <el-button type="primary" @click="FinanceclassificationOpen('添加财务分类信息',0,'提交')"   icon="el-icon-circle-plus-outline">增加</el-button>
                <el-button type="warning" @click="FinanceclassificationOpen('修改财务分类信息',1,'修改')"   icon="el-icon-edit">编辑</el-button>
                <el-button type="danger"  @click="_deleCategory"     icon="el-icon-delete"  >批量删除</el-button>
            </el-col>
            <el-col :offset="10" :span="7">
                <el-input   v-model="TitleName" placeholder="请输入搜索标题" >
                    <el-button slot="append" icon="el-icon-search" @click="_GetFinanceLoanDetail"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <el-row  style="padding-top: 10px">
            <el-col >
                <el-table :data="tableData"
                          style="width: 100%"
                          ref = "multipleTable"
                          @selection-change="selectionLineChangeHandle"
                          border>
                    <el-table-column header-align="center" type="selection" width="50" align="center"></el-table-column>
                    <el-table-column header-align="center" fixed type="index" label="序号" align="center" :index="_indexMethod"></el-table-column>
                    <el-table-column header-align="center" fixed prop="CategoryName" label="名称" align="center"  width="200"  ></el-table-column>
                    <el-table-column header-align="center" fixed prop="ParentId" label="父级分类" align="center"   width="200">
                        <template slot-scope="scope">
                            {{_GetNameById(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" fixed prop="Code" label="编码" align="center" width="110"  ></el-table-column>
                    <el-table-column header-align="center" fixed prop="CategoryDescript" label="备注" align="center" :show-overflow-tooltip="true"  ></el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block" style="float: right">
                    <el-pagination @size-change="_GetFinanceLoanDetail"
                                   @current-change="_GetFinanceLoanDetail"
                                   :current-page.sync="pagination.currentPage"
                                   :page-sizes="pagination.pagesizes"
                                   :page-size.sync="pagination.pagesize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="FinanceclassificationShow" width="40%" :title="Titlename"  @close="CloseEventdialog"  >
            <el-form :model="Category"  ref="Categoryref" label-width="80px">
                <el-form-item label="名称" prop="CategoryName">
                    <el-input   v-model="Category.CategoryName" ></el-input>
                </el-form-item>
                <el-form-item label="上级" prop="ParentId">
                    <el-select  v-model="Category.ParentId" placeholder="请选择活动区域"  style="width: 100%">
                        <el-option v-for="v in AllFinanceCategory" :value="v.Id" :data-userid="v.Id"  v-text="v.CategoryName"
                                   :key="v.CategoryName"
                                   :label="v.CategoryName" />
                    </el-select>
                </el-form-item>
                <el-form-item label="编码" prop="Code">
                    <el-input v-model="Category.Code"   ></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="CategoryDescript">
                    <el-input   v-model="Category.CategoryDescript"  ></el-input>
                </el-form-item>
                <div style="text-align: center"> <el-button type="warning"  @click="saveFinance">{{btnName}}</el-button></div>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    import * as publicjs from "/public/Scriput/Public"
    export default {
        name: "FinanceCategory",
        created() {
            this._GetFinanceLoanDetail();
            this.AllFinanceCategory = publicjs.GetAllFinanceCategory(this.$http);
        },
        data() {
            return {
                delidarray: [],
                btnName: '',
                FinanceclassificationShow: false,
                Titlename: '',
                FinanceType: 0,
                tableData: [],
                AllFinanceCategory: [],
                TitleName: '',
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [30, 50, 100,],
                    pagesize: 30,
                    total: 0
                },
                Category: {
                    id: 0,
                    CategoryDescript: '',
                    Code: '',
                    ParentId: '',
                    CategoryName: '',
                },
            }
        },
        methods: {
            FinanceclassificationOpen(str, number, strname) {
                this.Category = this.Category;
                this.Titlename = str;
                this.btnName = strname;
                this.FinanceType = number;
                if (number == 1) {
                    if (this.delidarray.length == 1) {
                        this.Category = this.delidarray[0];
                    } else {
                        this.$message.info("编辑选项只能选择一项");
                        return;
                    }
                }
                this.FinanceclassificationShow = true;
            },
            _indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //初始化表格数据加载
            _GetFinanceLoanDetail() {
                let loadding = this.openLoading();
                this.$http.post('/Finance/GetFinanceCategoryContent', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    TitleName: this.TitleName,
                }).then(x => {
                    loadding.close();
                    this.pagination.total = x.data.count
                    this.tableData = x.data.data;
                }).catch(() => {
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //表名称转化
            _GetNameById(row) {
                for (var i = 0; i < this.AllFinanceCategory.length; i++) {
                    if (this.AllFinanceCategory[i].Id == row.ParentId) {
                        return this.AllFinanceCategory[i].CategoryName;
                    }
                }
            },

            _SaveCategory() {
                let loadding = this.openLoading();
                this.$http.post('/Finance/AddFinanceCategoryContent', { Category: this.Category }).then(x => {
                    loadding.close();
                    if (x.data.bit) {
                        this.$message.success("提交成功")
                    } else {
                        this.$message.error("提交失败")
                    }
                })
            },
            _editCategory() {
                let loadding = this.openLoading();
                this.$http.post('/Finance/UpdateFinanceCategoryContent', { Category: this.Category }).then(x => {
                    loadding.close();
                    if (x.data.bit) {
                        this.$message.success("提交成功")
                    } else {
                        this.$message.error("提交失败")
                    }
                })
            },
            selectionLineChangeHandle(val) {
                this.delidarray = val;
            },
            _deleCategory() {
                this.$confirm('你确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    let arrid = [];
                    for (var i = 0; i < this.delidarray.length; i++) {
                        arrid.push(this.delidarray[i].Id);
                    }
                    let loadding = this.openLoading();
                    this.$http.post('/Finance/DeleteFinanceCategoryContent', arrid).then(x => {
                        loadding.close();
                        if (x.data.bit) {
                            this.$message.success("删除成功")
                        } else {
                            this.$message.error("删除失败")
                        }
                    })

                })
            },

            CloseEventdialog() {
                this.$refs["Categoryref"].resetFields();
            },
            saveFinance() {
                if (this.FinanceType == 0) {
                    this._SaveCategory();

                } else {
                    this._editCategory();
                }
                this.FinanceclassificationShow = false;
            },
        }
    }
</script>

<style scoped>
    .pad {
    padding:20px;
    }
</style>
